<template>
  <view>
    <view class="cu-form-group margin-top">
        <textarea maxlength="-1" @input="textareaAInput"
                  placeholder="请详细描述您的症状、疾病和身体状况，便于医生精确分析，字数限制在10-500个字之间"></textarea>
    </view>
    <view class="cu-bar bg-white margin-top">
      <view class="action">
        图片上传
      </view>
      <view class="action">
        {{ imgList.length }}/4
      </view>
    </view>
    <view class="cu-form-group">
      <view class="grid col-4 grid-square flex-sub">
        <view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="viewImage"
              :data-url="prefix+imgList[index]">
          <image :src="prefix+imgList[index]" mode="aspectFill"></image>
          <view class="cu-tag bg-red" @tap.stop="delImage" :data-index="index">
            <text class='cuIcon-close'></text>
          </view>
        </view>
        <view class="solids" @tap="chooseImage" v-if="imgList.length<4">
          <text class='cuIcon-cameraadd'></text>
        </view>
        <view v-if="imgList.length===0" style="width: 65vw">
          <text>上传图片（检查单、CT、病例、患处等）</text>
        </view>
      </view>
    </view>
    <view class="flex flex-direction align-center margin-top">
      <button class="cu-btn bg-green lg" style="width: 70vw" @click="handleSubmit">提交</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import {ref} from "vue";
import api from "@/api";
import {onReady} from "@dcloudio/uni-app";
import {uploadFile,imagePathPrefix} from '/settings'

const url =uploadFile.url
const name =uploadFile.name
const prefix =imagePathPrefix
const content = ref('')
const imgList = ref([])
const patientInfo = ref()

onReady(() => {
  api.patient.info({}).then(res => {
    if (res && res.data.code === 0) {
      if (res.data.data === null) {
        //跳转认证
        uni.redirectTo({
          url: '/pages/patient/info/create',
          success: () => {
            uni.showToast({
              icon: 'error',
              title: '请先完善身份',
            })
          }
        })
      } else {
        patientInfo.value = res.data.data
      }

    }
  })
})

const textareaAInput = (e: any) => {
  content.value = e.detail.value
}
const viewImage = (e: any) => {
  let tmp =JSON.parse(JSON.stringify(imgList.value))
  Object.keys(tmp).forEach(key=>{
    tmp[key]= prefix+tmp[key]
  })
  uni.previewImage({
    urls: tmp,
    current: e.currentTarget.dataset.url
  });
}
const delImage = (e: any) => {
  uni.showModal({
    title: '提示',
    content: '确定要删除这张图片吗？',
    cancelText: '取消',
    confirmText: '确认',
    success: res => {
      if (res.confirm) {
        imgList.value.splice(e.currentTarget.dataset.index, 1)
      }
    }
  })
}
const chooseImage = () => {
  uni.chooseImage({
    count: 4, //默认9
    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album'], //从相册选择
    success: (res) => {
      uni.uploadFile({
        url: url, //仅为示例，非真实的接口地址
        filePath: res.tempFilePaths[0],
        name: name,
        success: (uploadFileRes) => {
          let tmp = JSON.parse(uploadFileRes.data).data
          if (imgList.value.length != 0) {
            imgList.value = imgList.value.concat(tmp)
          } else {
            imgList.value = [tmp]
          }
          console.log(imgList.value)
        }
      });
    }
  });
}

const handleSubmit = () => {
  api.inquiry.create({
    username: patientInfo.value.username,
    name: patientInfo.value.name,
    avatar:patientInfo.value.avatar,
    content: content.value,
    images: JSON.stringify(imgList.value)
  }).then(res => {
    if (res && res.data.code === 0) {
      uni.showToast({
        title: res.data.msg,
        icon: 'success'
      })
    }
  })
}
</script>

<style>
</style>